import React, { Component } from 'react';
import Pubsub from 'pubsub-js'
import axios from 'axios';

export default class Search extends Component {

    search = () => {
        //获取用户的输入(连续结构赋值)
        const {keyWordElement: {value: keyword}} = this;
        console.log(keyword);
        //发送请求前，通知List更新状态
        Pubsub.publish('atguigu', {isFirst: false, isLoading: true});
        //发送网络请求
        axios.get('/api1/search/users?q=' + keyword).then(
            response =>{
                //console.log('成功了', response.data);
                //请求成功后，通知List更新状态
                Pubsub.publish('atguigu', {isLoading: false, users: response.data.items});
            },
            error => {
                console.log('失败了', error);
                //请求失败后，通知List更新状态
                Pubsub.publish('atguigu', {isLoading: false, err: error.message});
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索Github用户</h3>
                <div>
                    <input type="text" ref={c => this.keyWordElement = c} placeholder="输入内容进行搜索"/>&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        )
    }
}
